<template>
  <div class="app-container">
    <el-row class="pagecenter">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="产品类型">
          <el-select v-model="listQuery.type" placeholder="产品类型" class="selectStyle">
            <el-option v-for="item in productType" :key="item.code" :label="item.typeName" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="listQuery.status" placeholder="审核状态" class="selectStyle">
            <!-- <el-option label="未审核" value="0"></el-option>
              <el-option label="未通过" value="1"></el-option>
              <el-option label="已通过" value="2"></el-option> -->
            <el-option v-for="item in productStatus" :key="item.dictvalue" :label="item.dictname" :value="item.dictvalue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="dateScope" type="daterange" placeholder="选择时间范围" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="关键词查询">
          <el-input placeholder="档案名称或档案编号" v-model="listQuery.productionNameOrTraceId" :maxlength="50" @keyup.enter.native="handleCurrentChange(1)"></el-input>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button @click="fetchData" icon="search">查询</el-button>
          <el-button @click="resetFetch">
            <icon-svg icon-class="zhongzhi1"></icon-svg>&nbsp;&nbsp;重置条件</el-button>
          <el-button @click="handleExcel" v-show="btnVisible.isExport">
            <icon-svg icon-class="Excel4"></icon-svg>&nbsp;&nbsp;导出excel</el-button>
          <el-button @click="handleRecycle" v-show="btnVisible.isRecycle">
            <icon-svg icon-class="huishouzhan"></icon-svg>&nbsp;&nbsp;回收站</el-button>
          <!-- <el-button @click="handleExcel"><icon-svg icon-class="Excel4"></icon-svg>&nbsp;&nbsp;导出excel</el-button>
                <el-button @click="handleRecycle"><icon-svg icon-class="huishouzhan"></icon-svg>&nbsp;&nbsp;回收站</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="pageborder">
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" highlight-current-row tooltip-effect="dark" style="width: 100%">
        <el-table-column label='序号' min-width="80" :fit="true" header-align="center" align="center">
          <template scope="scope">
            {{ page.pageSize * (page.currentPage - 1) + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="档案编号" min-width="100" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productionname" label="档案名称" min-width="280" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.productionname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productionaddress" label="生产地址" min-width="280" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            {{scope.row.productionaddress}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="产品类型" min-width="105" header-align="center" align="center">
          <template scope="scope">
            <span>{{scope.row.type}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="securitycodequantity" label="验证码使用次数" min-width="150" header-align="center" align="right">
          <template scope="scope">
            <span>{{scope.row.securitycodequantity}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdate" label="发布时间" min-width="170" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.createdate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditstatus" label="审核状态" min-width="110" header-align="center" align="center">
          <template scope="scope">
            <span>{{scope.row.auditstatus}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180" header-align="center" align="center">
          <template scope="scope">
            <el-button type="small" @click="viewArchive(scope.$index,scope.row)" v-show="btnVisible.isView">
              <icon-svg icon-class="view"></icon-svg>&nbsp;&nbsp;查看</el-button>
            <el-button icon="delete" type="small" @click="deleteArchive(scope.$index,scope.row)" v-show="btnVisible.isDelete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination" v-if="page.total > 0 ? true : false">
      <el-pagination @current-change="handleCurrentChange" :page-size="page.pageSize" :current-page.sync="page.currentPage" layout="total, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<style scoped>
.pagination {
  text-align: center;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.colSpace {
  margin-left: 5px;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewBtn {
  float: right;
}

.selectStyle {
  width: 145px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>

<script>
import { getList, exportArchiveToExcel, archiveDelete, productionStatus } from 'api/archive';
import { getProductTypeList, getPositionList } from 'api/system';
import { parseTime } from 'utils/index';
import { btnIsVisible, getUrlParams, trimStr } from 'utils/customer';
import Cookies from 'js-cookie';

export default {
  data() {
    return {
      list: null,
      listQuery: {
        status: null,
        type: '',
        createdatestart: '',
        createdateend: '',
        productionNameOrTraceId: '',
        deleted: 0
      },
      page: {
        pageSize: null,
        total: null,
        totalPage: null,
        currentPage: null
      },
      listLoading: true,
      dateScope: null,
      productType: [],
      btnVisible: {
        isAdd: false,
        isView: false,
        isAudit: false,
        isDelete: false,
        isExport: false,
        isRecycle: false,
        isEnable: false
      },
      excelParams: '',
      excelUrl: '',
      productStatus: [],
    }
  },
  watch: {
    'listQuery.type': function(val) {
      this.handleCurrentChange(1)
    },
    'listQuery.status': function(val) {
      this.handleCurrentChange(1)
    },
    // 'listQuery.productionNameOrTraceId': function(val,oldval) {
    //    if (oldval && !val) {
    //      this.handleCurrentChange(1)
    //    }
    // },
    dateScope: function(val, oldval) {
      if (val || (oldval && !val)) {
        this.listQuery.createdatestart = null;
        this.listQuery.createdateend = null;
        this.handleCurrentChange(1)
      }
    },
  },
  created() {
    this.getProductType();
    this.getProductionStatus();
    this.fetchData();
    this.getBtnVisbleStatus();
  },
  methods: {
    getBtnVisbleStatus() {
      this.btnVisible.isView = btnIsVisible('ARCHIVES_LIST_VIEW') || false;
      this.btnVisible.isExport = btnIsVisible('ARCHIVES_LIST_EXPORT') || false;
      this.btnVisible.isAudit = btnIsVisible('ARCHIVES_LIST_AUDIT') || false;
      this.btnVisible.isDelete = btnIsVisible('ARCHIVES_LIST_DELETE') || false;
      this.btnVisible.isRecycle = btnIsVisible('ARCHIVES_LIST_RECYCLE') || false;
    },
    getProductType() {
      getProductTypeList().then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.productType = res.data;
        }
      })
    },
    getProductionStatus() {
      let requestParams = {
        deleted: 0
      }
      productionStatus(requestParams).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.productStatus = res.data;
        }
      })
    },
    resetFetch() {
      this.listQuery.type = '';
      this.dateScope = null;
      this.listQuery.status = null;
      this.listQuery.createdatestart = null;
      this.listQuery.createdateend = null;
      this.listQuery.productionNameOrTraceId = '';
      this.handleCurrentChange(1)
    },
    fetchData() {
      this.listLoading = true;
      this.page.pageSize = this.page.pageSize || 10;
      this.page.currentPage = this.page.currentPage || 1;
      this.listQuery.currentPage = this.page.currentPage;
      this.listQuery.pageSize = this.page.pageSize;
      this.listQuery.type = this.listQuery.type || '';
      if (this.dateScope) {
        if (this.dateScope[0] && this.dateScope[1]) {
          this.listQuery.createdatestart = parseTime(this.dateScope[0]);
          this.listQuery.createdateend = parseTime(this.dateScope[1]);
        }
      }
      this.listQuery.status = this.listQuery.status || '';
      this.listQuery.productionNameOrTraceId = trimStr(this.listQuery.productionNameOrTraceId) || '';
      this.excelParams = getUrlParams(this.listQuery)
      getList(this.listQuery).then(response => {
        let res = response.data;
        if (res.flag) {
          this.list = res.data;
          this.page = res.page;
        }
        this.listLoading = false;
      })
    },
    // 数据列表导出到excel
    handleExcel() {
      if (this.list.length <= 0) return;
      this.excelUrl = '/trc-service-product/production/exportTraceArchivesForReportStatistics' + this.excelParams;
      window.location.href = this.excelUrl;
    },
    // 查看档案回收站
    handleRecycle() {
      this.$router.push({ path: 'archiverecycle' })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleDivisionChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    viewArchive(index, row) {
      this.$router.push({ path: 'archiveview', query: { archiveid: row.id, auditstatus: row.auditstatus, deleted: 0 } })
    },
    deleteArchive(index, row) {
      this.$confirm('此操作将会把该记录放入回收站, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let requestParams = {
          id: row.id
        }
        archiveDelete(requestParams).then(reponse => {
          let res = reponse.data;
          if (res.flag === 1) {
            // 提示信息
            this.$message({
              showClose: true,
              message: '产品档案删除成功',
              type: 'success'
            });
            // 重新获取数据
            this.fetchData()
          } else {
            // 档案删除提示失败
            this.$message({
              showClose: true,
              message: '产品档案删除失败',
              type: 'error'
            });
          }
        })
      }).catch(() => {
      });
      // let requestParams = {
      //   id: row.id
      // }
      // archiveDelete(requestParams).then(reponse => {
      //   let res = reponse.data;
      //   if (res.flag === 1) {
      //     // 提示信息
      //     this.$message({
      //       showClose: true,
      //       message: '产品档案删除成功',
      //       type: 'success'
      //     });
      //     // 重新获取数据
      //     this.fetchData()
      //   } else {
      //     // 档案删除提示失败
      //     this.$message({
      //       showClose: true,
      //       message: '产品档案删除失败',
      //       type: 'error'
      //     });
      //   }
      // })
    }
  }
};
</script>